<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">网站名称</label>
        <el-input
          v-model="query.webName"
          clearable
          placeholder="网站名称"
          style="width: 185px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :visible.sync="crud.status.cu > 0"
        :title="crud.status.title"
        width="500px"
      >
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="域名" prop="domain">
            <el-input v-model="form.domain" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="网站地址" prop="webAddress">
            <el-input v-model="form.webAddress" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="备用地址">
            <el-input v-model="form.backupAddress" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="网站名称" prop="webName">
            <el-input v-model="form.webName" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="网站类型" prop="webType">
            <el-select v-model="form.webType" filterable placeholder="请选择">
              <el-option
                v-for="item in dict.spider_code"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.remark" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%;"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="domain" label="域名" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-link :href="scope.row.domain" type="primary">
              {{ scope.row.domain }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="webAddress" label="网站地址" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-link :href="scope.row.webAddress" type="primary">
              {{ scope.row.webAddress }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="backupAddress" label="备用地址" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-link :href="scope.row.backupAddress" type="success">
              {{ scope.row.backupAddress }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="webName" label="网站名称" />
        <el-table-column prop="webType" label="网站类型">
          <template slot-scope="scope">
            <el-tag>
              {{ dict.label.spider_code[scope.row.webType] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="updateTime" label="更新时间" />
        <!--        <el-table-column prop="createTime" label="创建时间" />-->
        <el-table-column
          v-if="checkPer(['admin','spiderWeb:edit','spiderWeb:del'])"
          label="操作"
          width="200px"
          align="left"
        >
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            >
              <el-dropdown v-if="scope.row.webType === 'video_code'" trigger="click">
                <el-button type="success">
                  更多<i class="el-icon-arrow-down el-icon--right" />
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-popconfirm v-permission="['admin','spiderWeb:edit']" :title="'是否爬取[' + scope.row.webName + ']'" @confirm="onSpiderAction(scope.row)">
                      <el-button slot="reference" size="mini" style="margin-right: 3px;" type="text">爬取基本信息</el-button>
                    </el-popconfirm>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-popconfirm v-permission="['admin','spiderWeb:edit']" :title="'是否爬取[' + scope.row.webName + ']的明细'" @confirm="onSpiderDetailAction(scope.row)">
                      <el-button slot="reference" size="mini" style="margin-right: 3px;" type="text">爬取后续信息</el-button>
                    </el-popconfirm>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-popconfirm v-permission="['admin','spiderWeb:edit']" :title="'是否重置[' + scope.row.webName + ']的缓存'" @confirm="onResetRedisCache(scope.row)">
                      <el-button slot="reference" size="mini" style="margin-right: 3px;" type="text">重置缓存</el-button>
                    </el-popconfirm>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-popconfirm v-permission="['admin','spiderWeb:edit']" :title="'是否缓存[' + scope.row.webName + ']的所有视频封面'" @confirm="onCacheImg(scope.row)">
                      <el-button slot="reference" size="mini" style="margin-right: 3px;" type="text">缓存封面</el-button>
                    </el-popconfirm>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-popconfirm v-permission="['admin','spiderWeb:edit']" :title="'是否缓存[' + scope.row.webName + ']的所有视频播放文件'" @confirm="onCacheM3U8(scope.row)">
                      <el-button slot="reference" size="mini" style="margin-right: 3px;" type="text">缓存文件</el-button>
                    </el-popconfirm>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-popconfirm v-permission="['admin','spiderWeb:edit']" :title="'是否更新[' + scope.row.webName + ']的所有视频播放文件'" @confirm="onOverwriteM3u8File(scope.row)">
                      <el-button slot="reference" size="mini" style="margin-right: 3px;" type="text">更新播放文件</el-button>
                    </el-popconfirm>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown v-if="scope.row.webType === 'caricature_code'" trigger="click">
                <el-button type="success">
                  更多<i class="el-icon-arrow-down el-icon--right" />
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-popconfirm v-permission="['admin','spiderWeb:edit']" :title="'是否爬取[' + scope.row.webName + ']'" @confirm="onSpiderComicAction(scope.row)">
                      <el-button slot="reference" size="mini" style="margin-right: 3px;" type="text">爬取基本信息</el-button>
                    </el-popconfirm>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-popconfirm v-permission="['admin','spiderWeb:edit']" :title="'是否爬取[' + scope.row.webName + ']的明细'" @confirm="onSpiderComicDetailAction(scope.row)">
                      <el-button slot="reference" size="mini" style="margin-right: 3px;" type="text">爬取后续信息</el-button>
                    </el-popconfirm>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-popconfirm v-permission="['admin','spiderWeb:edit']" :title="'是否爬取[' + scope.row.webName + ']的漫画内容'" @confirm="onSpiderComicContentAction(scope.row)">
                      <el-button slot="reference" size="mini" style="margin-right: 3px;" type="text">爬取内容</el-button>
                    </el-popconfirm>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-popconfirm v-permission="['admin','spiderWeb:edit']" :title="'是否重置[' + scope.row.webName + ']的缓存'" @confirm="onResetComicRedisCache(scope.row)">
                      <el-button slot="reference" size="mini" style="margin-right: 3px;" type="text">重置缓存</el-button>
                    </el-popconfirm>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-popconfirm v-permission="['admin','spiderWeb:edit']" :title="'是否缓存[' + scope.row.webName + ']的所有视频封面'" @confirm="onCacheComicImg(scope.row)">
                      <el-button slot="reference" size="mini" style="margin-right: 3px;" type="text">缓存封面</el-button>
                    </el-popconfirm>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </udOperation>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudSpiderWeb from '@/api/spider/spiderWeb'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = {
  webId: null,
  domain: null,
  webAddress: null,
  backupAddress: null,
  webName: null,
  webType: null,
  deletedFlag: null,
  remark: null,
  updateTime: null,
  createTime: null
}
export default {
  name: 'SpiderWeb',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['spider_code'],
  cruds() {
    return CRUD({
      title: '爬虫网站',
      url: 'api/spiderWeb',
      idField: 'webId',
      sort: 'webId,desc',
      crudMethod: { ...crudSpiderWeb }
    })
  },
  data() {
    return {
      permission: {
        add: ['admin', 'spiderWeb:add'],
        edit: ['admin', 'spiderWeb:edit'],
        del: ['admin', 'spiderWeb:del']
      },
      rules: {
        domain: [
          { required: true, message: '网站地址不能为空', trigger: 'blur' }
        ],
        webAddress: [
          { required: true, message: '网站地址不能为空', trigger: 'blur' }
        ],
        webName: [
          { required: true, message: '网站名称不能为空', trigger: 'blur' }
        ],
        webType: [
          { required: true, message: '网站类型不能为空', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'webName', display_name: '网站名称' }
      ]

    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    // ---------------------------- 爬取视频 ----------------------------
    onSpiderAction(data) {
      crudSpiderWeb.spiderAction(data)
    },
    onSpiderDetailAction(data) {
      crudSpiderWeb.spiderDetailAction(data)
    },
    onResetRedisCache(data) {
      crudSpiderWeb.resetRedisCache(data.webId)
    },
    onCacheImg(data) {
      crudSpiderWeb.cacheImgByWebId(data.webId)
    },
    onCacheM3U8(data) {
      crudSpiderWeb.cacheM3U8ByWebId(data.webId)
    },
    onOverwriteM3u8File(data) {
      crudSpiderWeb.overwriteM3u8File(data.webId)
    },
    // ---------------------------- 爬取漫画 ----------------------------
    onSpiderComicAction(data) {
      crudSpiderWeb.spiderComicAction(data)
    },
    onSpiderComicDetailAction(data) {
      crudSpiderWeb.spiderComicDetailAction(data)
    },
    onResetComicRedisCache(data) {
      crudSpiderWeb.resetComicRedisCache(data.webId)
    },
    onCacheComicImg(data) {
      crudSpiderWeb.cacheComicImgByWebId(data.webId)
    },
    onSpiderComicContentAction(data) {
      crudSpiderWeb.spiderComicContentAction(data)
    }
  }
}
</script>

<style scoped>

</style>
